<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- 

    关键语法:
document.querySelector(`.${target.getAttribute("data-rel")}`);
xxxxxxxxxx.classList.add("active-section");


 -->

<body>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        button {
            padding: 9px 35px;
            cursor: pointer;
            background: white;
            border: 0;
        }

        button:hover {
            background: darkseagreen;
        }

        .root {
            width: 800px;
            border: 1px solid red;
            margin: auto;
            margin-top: 66px;
        }

        .btn-nav {
            margin-bottom: 12px;
        }

        .content-box {
            background: linen;
            font-size: 0;
        }

        .content {
            height: 200px;
            display: inline-block;
            width: 400px;
            border: 2px solid red;
        }

        .active {
            background: darkseagreen;
        }

        .hidden {
            height: 0;
            overflow: hidden;
            border: 0;
            font-size: 0;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        h1 {
            text-align: center;
            font-size: x-large;
        }
    </style>
    <div class="root">
        <h1>不兼容 ie  </h1>
        <h1>不兼容 ie  </h1>
        <h1> js 不兼容 ie  </h1>
        <nav>
            <div class="btn-nav">
                <button data-rel="zero" class="active">0</button>
                <button data-rel="one">1</button>
                <button data-rel="two">2</button>
                <button data-rel="three">3</button>
            </div>
            <div class="content-box">
                <div class="content zero">
                    <img src="../img/bg2.jpeg" alt="">
                    <h1>zero</h1>
                </div>
                <div class="content one">
                    <img src="../img/bg6.jpg" alt="">
                    <h1>one</h1>
                </div>
                <div class="content two">
                    <img src="../img/bg1.jpg" alt="">
                    <h1>two</h1>
                </div>
                <div class="content three">
                    <img src="../img/bg0.jpeg" alt="">
                    <h1>three</h1>
                </div>
            </div>
        </nav>

    </div>




    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        // 循环给每个加上 hidden 标签
        function hidden() {
            let contents = document.querySelectorAll(".content");
            contents.forEach(item => {
                item.classList.add("hidden")
            })
        }

        隐藏所有内容
        然后给点击的按钮添加 active :
        btns.forEach(item => {
            item.addEventListener('click', eee => click_fun(eee.target));
            item.classList.contains("active") && click_fun(item);
        })

        // 给点击的那个对象 remove 掉 hidden 的标签
        function click_fun(target) {
            hidden()                -> 隐藏所有内容
            btns.forEach(item => {
                item.classList.remove("active")
            });
            target.classList.add("active")
            let class_name = target.getAttribute("data-rel");
            console.log("data-rel ==>   " + class_name);  // 输出 one , two, three, four  这也是下面的 class
            let content_section = document.querySelector(`.${class_name}`)  //  => document.querySelector('.one')
            console.log(content_section);
            content_section.classList.remove("hidden");   // 移除 hidden 标签
            console.log(content_section);
        }
    </xmp>


</body>
<script>
    var btns = document.querySelectorAll(".btn-nav button")
    console.log(btns);

    // 循环给每个加上 hidden 标签
    function hidden() {
        let contents = document.querySelectorAll(".content");
        contents.forEach(item => {
            item.classList.add("hidden")
        })
    }


    // 给点击的那个对象 remove 掉 hidden 的标签
    function click_fun(target) {
        hidden() // 隐藏所有内容
        btns.forEach(item => {
            item.classList.remove("active")
        });
        target.classList.add("active")
        let class_name = target.getAttribute("data-rel");
        console.log("data-rel ==>   " + class_name);  // 输出 one , two, three, four  这也是下面的 class
        let content_section = document.querySelector(`.${class_name}`)  //  => document.querySelector('.one')
        console.log(content_section);
        content_section.classList.remove("hidden");   // 移除 hidden 标签
        console.log(content_section);
    }



    // 初始化, 隐藏所有内容:
    hidden()



    window.onload = function () {
        // 循环添加点击事件:
        btns.forEach(item => {
            item.addEventListener('click', eee => click_fun(eee.target));
            item.classList.contains("active") && click_fun(item);
        })
    }
</script>

</html>